<!--
*- coding = utf-8 -*-
#@Time : 2023/6/19 17:20
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
  <div class="app-container">
      <view>
          <u-tabs-swiper ref="uTabsRef" :list="list" :current="current" @change="handleTabsChange" :is-scroll="false"
                         swiperWidth="750"></u-tabs-swiper>
      </view>
      <swiper :current="swiperCurrent" @transition="transition" style="height:calc(100vh - 135px);border-top:1px solid #e5e5e5" @animationfinish="handleAnimationFinish">
          <swiper-item class="swiper-item">
              <scroll-view scroll-y style="height: 100%;width: 100%;">
                  <Friend/>
              </scroll-view>
          </swiper-item>
          <swiper-item class="swiper-item">
              <scroll-view scroll-y style="height: 100%;width: 100%;">
                  <Group/>
              </scroll-view>
          </swiper-item>
      </swiper>
<!--    <view>-->
<!--      <CommonList :title="'群聊'" :icon="'groupChat'" @click="handleToPage('groupChat')" >-->
<!--        <template #rightSlot>-->
<!--          <view></view>-->
<!--        </template>-->
<!--      </CommonList>-->
<!--      <CommonList :title="'新朋友'" :icon="'newFriends'" @click="handleToPage('newFriends')" >-->
<!--        <template #rightSlot>-->
<!--          <view></view>-->
<!--        </template>-->
<!--      </CommonList>-->
<!--    </view>-->
<!--    &lt;!&ndash;     #ifdef  H5&ndash;&gt;-->
<!--    <view style="position: relative;height:calc(100vh - 380rpx)">-->
<!--      <uni-indexed-list :options="list" :show-select="false" @click="handleBindClick" />-->
<!--    </view>-->
<!--    &lt;!&ndash;    #endif&ndash;&gt;-->

<!--    &lt;!&ndash;    #ifdef  APP-PLUS&ndash;&gt;-->
<!--    <view style="position: relative;height:calc(100vh - 180rpx)">-->
<!--      <uni-indexed-list :options="list" :show-select="false" @click="handleBindClick" />-->
<!--    </view>-->
<!--    &lt;!&ndash;    #endif&ndash;&gt;-->
  </div>
</template>

<script setup lang="ts">
    import Friend from "./cpns/friends/index"
    import Group from "./cpns/group/index"
import CommonList from "@/components/commonList/index"
import {ref} from "vue";
import {handlePageTo} from "@/utils/utils";

let list = ref([{
    name: '好友',
}, {
    name: '群组',//默认进入世界群组
}])
let swiperCurrent = ref(0)
let current = ref(0)
let uTabsRef = ref()
// tabs通知swiper切换
const handleTabsChange = (index:number) => {
    console.log(index);
    swiperCurrent.value = index;
}
// swiper-item左右移动，通知tabs的滑块跟随移动
const transition = (e:any) => {
    let dx = e.detail.dx;
    uTabsRef.value.setDx(dx);
}
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
const handleAnimationFinish = (e:any) => {
    let crt = e.detail.current;
    uTabsRef.value.setFinishCurrent(crt);
    swiperCurrent.value = crt;
    current.value = crt;
}
// scroll-view到底部加载更多
const onreachBottom = () => {

}


let list1 = ref([{
  'letter': 'A',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'B',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'C',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'D',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'E',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'F',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'G',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'H',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'I',
  'data': []
}, {
  'letter': 'J',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}, {
  'letter': 'K',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"阿拉山口机场",
      value:"2",
    },
    {
      name:"阿勒泰机场",
      value:"3",
    },
    {
      name:"阿里昆莎机场",
      value:"4",
    },
    {
      name:"安庆天柱山机场",
      value:"5",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}])

const handleBindClick = (e: any) => {
  console.log(e,"2222222222222222");
  console.log('点击item，返回数据' + JSON.stringify(e))
  let {name,value} = e.item;
  handlePageTo("navigateTo","/pageCommon/chatInfo/index?id="+value)
}

//跳转页面
const handleToPage = (pageName:string)=>{

}
</script>

<style scoped lang="less">
    .app-container{
        background:white;
    }
.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
</style>
